<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工管理</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<!-- iframe 基本通用样式 -->
		<link rel="stylesheet" type="text/css" href="../../css/common/iframe.css" />
	</head>
	<body>
		<div id="app">
			<div class="header">
				<i class="el-icon-postcard"></i>
				权限管理/员工管理
			</div>
			<div class="main">
				<el-input placeholder="请输入员工账号" size="mini" v-model="name" style="width:150px"></el-input>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="getPageInfo">搜索</el-button>
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddForm()">添加</el-button>
				<el-button type="danger" icon="el-icon-delete" size="mini" @click="deteleBatch">批量删除</el-button>
				<!-- 导入 -->
				<!-- 员工操作不能做导入操作
					1、如果导出时，不导出加密后的密码，在导入时，密码非空，添加失败
					2、如果导出时，导出加密后的密码，因为密码使用了加密处理。我们在导出的 excel 文件里时候，
					密码是加密后的，当我们 导入 Excel 时，每解析一行，调用添加方法，
					相当于对文明密码，做了二次加密，密码是单向加密的，无法进行破译后得到明文密码，
					再进行添加加密，所以，不能做 员工操作 不能做导入操作
				 -->
				<!-- <el-upload action="http://localhost:8080/employee/inExcel" method="post" :headers="headers"
					:show-file-list="false" :on-success="uploadSuccess" style="display:inline-block; padding: 0 10px">
					<el-button size="mini" type="success" icon="el-icon-folder-add">导入</el-button>
				</el-upload> -->
				<!-- 导出 -->
				<el-button type="success" icon="el-icon-folder-opened" size="mini">
					<a href="http://localhost:8080/employee/outExcel" style="text-decoration: none; color:#fff">导出</a>
				</el-button>
				<!-- 列表数据 -->
				<table class="listTable" border="1px">
					<tr>
						<th>
							<input type="checkbox" class="chexkbox" @change="allSelect" :checked="isAllSelect">
						</th>
						<th>账号</th>
						<th>拥有角色</th>
						<th>手机号</th>
						<th>电子邮箱</th>
						<th>联系地址</th>
						<th>状态</th>
						<th>备注</th>
						<th width="150">基本操作</th>
					</tr>
					<tr v-for="item in list">
						<td>
							<input type="checkbox" style="width:20px" :value="item.id" :checked="isAllSelect"
								@change="ckSelect">
						</td>
						<td>{{item.username}}</td>
						<td>
							<el-tag size="small" type="success" v-for="i in item.roleName" style="margin-right: 5px;">
								{{i}}
							</el-tag>
						</td>
						<td>{{item.phone}}</td>
						<td>{{item.email}}</td>
						<td>{{item.address}}</td>
						<td>
							<el-switch v-model="item.status" active-color="#13ce66" inactive-color="#ff4949"
								:active-value="0" :inactive-value="1" @change="changeStatus(item.id,item.status)">
							</el-switch>
						</td>
						<td>{{item.remarks}}</td>
						<td style="width:250px">
							<!-- 角色 -->
							<span style="padding-right:8px">
								<el-button type="primary" icon="el-icon-s-custom" size="mini"
									@click="checkRole(item.id, item.roleName)">角色
								</el-button>
							</span>
							<!-- 修改 -->
							<span style="padding-right:8px">
								<el-button type="primary" icon="el-icon-edit" size="mini" @click="update(item.id)">修改
								</el-button>
							</span>
							<!-- 删除 -->
							<span>
								<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(item.id)">
									删除</el-button>
							</span>
						</td>
					</tr>
				</table>
				<!-- 分页 -->
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="pageCurrent" :page-sizes="[6, 12]" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

				<!-- 添加表单 -->
				<el-dialog id="el-dialog" title="添加员工" :visible.sync="addFormVisible" width="40%">
					<el-form class="addform" :model="addFrom" ref="addForm" label-position="right" label-width="70px"
						size="mini" :rules="rules">
						<el-form-item label="账号" prop="username">
							<el-input v-model="addFrom.username" placeholder="请输入账号" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input type="password" v-model="addFrom.password" placeholder="请输入密码" style="width:200px"
								show-password>
							</el-input>
						</el-form-item>
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="addFrom.phone" placeholder="请输入手机号" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="电子邮箱">
							<el-input v-model="addFrom.email" placeholder="请输入电子邮箱" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="联系地址">
							<el-input v-model="addFrom.address" placeholder="请输入联系地址" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" v-model="addFrom.remarks" name="remarks" placeholder="请输入备注"
								rows=3 style="width:300px">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="addFormVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="addSubmit" size="mini">提 交</el-button>
					</div>
				</el-dialog>

				<!-- 修改表单 -->
				<el-dialog id="el-dialog" title="修改员工信息" :visible.sync="updateFormVisible" width="40%">
					<el-form class="updateform" :model="updateFrom" ref="updateForm" label-position="right"
						label-width="70px" size="mini" :rules="rules">
						<el-form-item label="账号" prop="username">
							<el-input v-model="updateFrom.username" placeholder="请输入账号" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input type="password" v-model="updateFrom.password" placeholder="请输入密码"
								style="width:200px" show-password>
							</el-input>
						</el-form-item>
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="updateFrom.phone" placeholder="请输入手机号" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="电子邮箱">
							<el-input v-model="updateFrom.email" placeholder="请输入电子邮箱" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="联系地址">
							<el-input v-model="updateFrom.address" placeholder="请输入联系地址" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-radio v-model="updateFrom.status" :label="0">正常</el-radio>
							<el-radio v-model="updateFrom.status" :label="1">异常</el-radio>
						</el-form-item>
						<el-form-item label="备注">
							<el-input type="textarea" v-model="updateFrom.remarks" name="remarks" placeholder="请输入备注"
								rows=3 style="width:300px">
							</el-input>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="updateFormVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="updateSubmit" size="mini">提 交</el-button>
					</div>
				</el-dialog>

				<!-- 角色表单 -->
				<el-dialog id="el-dialog" title="分配员工角色" :visible.sync="roleVisible" width="40%">
					<div v-for="role in roleList">
						<!-- @change="roleCk" -->
						<input name="checkBox" @click="roleCk"  type="checkbox" :value="role.id" style="width:20px">{{role.name}}
					</div>
					</el-form>
					<div slot="footer">
						<el-button @click="roleVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="updateRoleSubmit(updateRoleId)" size="mini">提 交</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				// 自定义手机号的验证规则
				const checkPhone = (rule, value, callback) => {
					if (value) {
						const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
						if (reg.test(value)) {
							callback()
						} else {
							return callback(new Error('请输入正确的电话'))
						}
					}
				};
				return {
					name: '', //查询关键字
					pageCurrent: 1, //当前页码
					pageSize: 12, //每页条数
					total: 0, //查询分页系总条数
					list: '', // 员工列表数据
					value: '0', //状态开关员工
					addFormVisible: false, //添加员工表单信息开关
					// 添加员工表单信息
					addFrom: '',
					// 表单验证规则
					rules: {
						username: [{
							required: true,
							message: '账号不能为空',
							trigger: 'blur',
						}],
						password: [{
							required: true,
							message: '密码不能为空',
							trigger: 'blur',
						}],
						phone: [{
							validator: checkPhone,
							trigger: 'blur'
						}]
					},
					updateFormVisible: false, //修改员工表单信息开关
					// 修改员工表单信息
					updateFrom: {
						id: '', // 员工id
						username: '', //员工账号
						password: '', //密码
						address: '', //联系地址
						email: '', //电子邮箱
						phone: '', //手机号
						remarks: '', //备注
						status: '0', //状态
					},
					isAllSelect: false, //是否全选
					ids: [], //id 数组
					headers: {
						"token": localStorage.getItem('token')
					},
					roleVisible: false, //分配角色信息弹框按钮
					roleList: '', //分配角色信息
					roleIds:[], //分配角色多选框id数组
					updateRoleId:''//要分配角色的职工的id
				}
			},
			mounted() { // 生命周期函数
				this.getPageInfo()
				this.getAllRole()
			},
			methods: {
				//获取分页列表数据
				getPageInfo() {
					console.log(this.name)
					if (this.name.trim() != '') { //判断是否添加了搜素关键字
						//获取token
						let jwtToken = localStorage.getItem('token')
						axios({
							method: 'get',
							url: 'http://localhost:8080/employee/page' + '/' + this.pageCurrent + '/' + this
								.pageSize + '/' + this.name,
							headers: {
								'token': jwtToken
							}
						}).then(res => {
							console.log(res.data)
							if (res.data.code == 200) { //成功
								let employeePageInfo = res.data.data.employeePage
								//将后端返回的列表数据赋值给 list
								this.list = employeePageInfo.records
								//将后端分页信息也赋值给前端相应字段
								this.pageCurrent = employeePageInfo.current
								this.pageSize = employeePageInfo.size
								this.total = employeePageInfo.total
							} else {
								this.$message.error("系统错误请联系管理员！")
							}
						})
					} else { //没有带关键字查询列表信息
						//获取token
						let jwtToken = localStorage.getItem('token')
						axios({
							method: 'get',
							url: 'http://localhost:8080/employee/page' + '/' + this.pageCurrent + '/' + this
								.pageSize,
							headers: {
								'token': jwtToken
							}
						}).then(res => {
							console.log(res.data)
							if (res.data.code == 200) { //成功
								let employeePageInfo = res.data.data.employeePage
								//将后端返回的列表数据赋值给 list
								this.list = employeePageInfo.records
								//将后端分页信息也赋值给前端相应字段
								this.pageCurrent = employeePageInfo.current
								this.pageSize = employeePageInfo.size
								this.total = employeePageInfo.total
							} else {
								this.$message.error("系统错误请联系管理员！")
							}
						})
					}
				},
				//更新每页条数
				handleSizeChange(val) {
					// console.log(`每页 ${val} 条`);
					this.pageSize = val
					this.getPageInfo()
				},
				//更新当前页
				handleCurrentChange(val) {
					// console.log(`当前页: ${val}`);
					this.pageCurrent = val
					this.getPageInfo()
				},
				//改变员工状态
				changeStatus(id, status) {
					console.log(id)
					console.log(status)
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/employee/status' + '/' + id + '/' + status,
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						console.log(res)
					})
				},
				// 添加员工
				addSubmit() {
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'post',
						url: 'http://localhost:8080/employee/add',
						headers: {
							'token': jwtToken
						},
						data: {
							username: this.addFrom.username,
							password: this.addFrom.password,
							address: this.addFrom.address,
							email: this.addFrom.email,
							phone: this.addFrom.phone,
							remarks: this.addFrom.remarks,
							status: 0
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.$message.success(res.data.message)
							//关闭添加表单
							this.addFormVisible = false
							//刷新列表数据，重新求情列表数据
							this.getPageInfo()
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 打开添加表单
				openAddForm(){
					// 清空数据
					this.addFrom = {}
					// 关闭表单
					this.addFormVisible = true
				},
				// 单个删除，根据员工id,删除员工数据
				deleteById(id) {
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'delete',
						url: 'http://localhost:8080/employee/delete/' + id,
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 打印后端返回的消息
							this.$message.success(res.data.message)
							//刷新列表数据，重新求情列表数据
							this.getPageInfo()
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 根据id，查询用户并显示到修改表单中
				update(id) {
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/employee/selectOne/' + id,
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.updateFrom = res.data.data.employee
							console.log(this.updateFrom)
							// 打开修改表单
							this.updateFormVisible = true
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 修改员工
				updateSubmit() {
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'put',
						url: 'http://localhost:8080/employee/update',
						headers: {
							'token': jwtToken
						},
						data: {
							id: this.updateFrom.id,
							username: this.updateFrom.username,
							password: this.updateFrom.password,
							address: this.updateFrom.address,
							email: this.updateFrom.email,
							phone: this.updateFrom.phone,
							remarks: this.updateFrom.remarks,
							status: this.updateFrom.status
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.$message.success(res.data.message)
							//关闭修改表单
							this.updateFormVisible = false
							//刷新列表数据，重新求情列表数据
							this.getPageInfo()
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				//e事件源，谁发生了这件事
				allSelect(e) {
					this.ids = []
					// 设置全选状态
					this.isAllSelect = e.target.checked
					// 如果是选中状态,将所有的id到ids中
					if (this.isAllSelect) {
						//添加所有的id到ids中
						this.list.forEach(element => {
							this.ids.push(element.id)
						});
					}
					console.log(this.ids)
				},
				ckSelect(e) {
					let id = e.target._value
					if (e.target.checked) { //选中，把对应的id添加到ids数组
						this.ids.push(id)
					} else { // 未选中，查找ids有没有对应的id，如果有删除掉
						let delindex = this.ids.indexOf(id)
						if (delindex > -1) {
							this.ids.splice(delindex, 1)
						}
					}
					console.log(this.ids)
				},
				//批量删除
				deteleBatch() {
					console.log(this.ids)
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'delete',
						url: 'http://localhost:8080/employee/deleteBatch',
						headers: {
							'token': jwtToken
						},
						data: this.ids
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							// 打印后端返回的消息
							this.$message.success(res.data.message)
							//刷新列表数据，重新求情列表数据
							this.getPageInfo()
							// 清空 ids 数组
							this.ids = []
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				//导入上传成功的钩子
				// uploadSuccess(response) {
				// 	console.log(response)
				// 	if (response.code == 200) {
				// 		this.$message.success(response.message)
				// 		//重新加载列表数据
				// 		this.getPageInfo()
				// 	} else {
				// 		this.$message.error("系统错误请联系管理员！")
				// 	}
				// },
				// 查询角色列表
				getAllRole() {
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/role/getAllRole',
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.roleList = res.data.data.role
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 打开分配角色表单，将 员工已有的角色勾选上
				checkRole(id, roleName) {
					// this.getAllRole()
					this.getPageInfo()
					// 打开分配职工角色表单
					this.roleVisible = true
					// 记录要分配员工角色的员工id
					this.updateRoleId = id
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'get',
						url: 'http://localhost:8080/role/getAllRole',
						headers: {
							'token': jwtToken
						}
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							this.roleIds = []
							console.log(res.data)
							// 1、获取全部角色信息
							this.roleList = res.data.data.role
							// 2、将用户的角色多选框勾选
							var checkBox = document.getElementsByName("checkBox");
							// 先全不选
							for (var i = 0; i < checkBox.length; i++) {
							    checkBox[i].checked = false;//将多选框设置为选中状态
							}
							var i = 0; //while循环计数器
							while (i < checkBox.length) {
								// 当当前职工角色名字和列表里的角色名字相等时
								for (var item of this.roleList) {
									for (var j of roleName) {
										if(j == item.name){
											checkBox[i].checked = true; //将多选框设置为选中状态
											// 将 roleId 放到数组中
											this.roleIds.push(item.id)
											console.log(this.roleIds)
											break
										}	
									}
									i++
								}
							}
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				},
				// 分配角色多选框是否选中
				roleCk(e) {
					let id = e.target._value
					if (e.target.checked) { //选中，把对应的id添加到roleIds数组
						this.roleIds.push(id)
					} else { // 未选中，查找roleIds有没有对应的id，如果有删除掉
						let delindex = this.roleIds.indexOf(id)
						if (delindex > -1) {
							this.roleIds.splice(delindex, 1)
						}
					}
					console.log(this.roleIds)
				},
				// 分配角色
				updateRoleSubmit(id){
					console.log('员工id'+id)
					//获取token
					let jwtToken = localStorage.getItem('token')
					axios({
						method: 'post',
						url: 'http://localhost:8080/employee/addRoleForEmployee/' + id,
						headers: {
							'token': jwtToken
						},
						data: this.roleIds
					}).then(res => {
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.$message.success(res.data.message)
							//刷新数据
							this.getPageInfo()
							this.roleVisible = false
						} else { //失败
							this.$message.error(res.data.message)
						}
					})
				}
			}
		})
	</script>
</html>
